<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <select name="province" id="province"></select>
    <select name="city" id="city"></select>
    <select name="country" id="country"></select>

    <script>
      // 省份数组
      var provinceArr = ['上海', '江苏', '河北'];
      // 城市数组
      var cityArr = [
        ['上海市'],
        ['苏州市', '南京市', '扬州市'],
        ['石家庄', '秦皇岛', '张家口']
       ];
      // 区域数组
      var countryArr = [
        [
          ['黄浦区', '静安区', '长宁区', '浦东区']
        ], [
          ['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
          ['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
          ['邗江区', '广陵区', '江都区']
        ], [
          ['长安区', '桥西区', '新华区', '井陉矿区'],
          ['海港区', '山海关区', '北戴河区', '抚宁区'],
          ['桥东区', '桥西区', '宣化区', '下花园区']
        ]
      ];
    //将数据添加到province
    let province = document.getElementById('province');
    let city  = document.getElementById('city');
    let country  = document.getElementById('country');



    for(let i = 0; i<provinceArr.length;i++){
      let option = new Option(provinceArr[i],i);
        province.options.add(option);
    }


    province.onchange  = function(e){
        console.log(province.value);
 
    city.options.length = 1;

        let citys = cityArr[province.value];      
         for(let i = 0 ; i<citys.length;i++){
                let option = new Option(citys[i],i);
                city.options.add(option);
         }
            //清空城区选项
            countrys.options.length = 1;
         
    }

    city.onchange = function(e){
        //响应城市的改变
        
        country.options.length = 1;//清空

        let countrys = countryArr[province.value][city.value];  
         for(let i = 0 ; i<countrys.length;i++){
                let option = new Option(countrys[i],i);
                country.options.add(option);
        
    }


    }
 
    </script>

</body>
</html>